<template>
  <el-row :gutter="12">
    <el-col :span="10">
      <channel-column
              :mediaQueryList="mediaQueryList"
              :packageid="pkid"
              ref="channelColumnRef"
              :columnMediaConfig="columnMediaConfig"
              @getChannelMedias="getChannelMedias"
              @getColumnMedias="getColumnMedias"
      />
    </el-col>
    <el-col :span="14">
      <column-media
              :mediaQueryList="mediaQueryList"
              :packageid="pkid"
              :columnMediaConfig="columnMediaConfig"
              ref="columnMediaRef" />
    </el-col>
  </el-row>
</template>

<script>
  import {ref, nextTick, toRef, reactive} from 'vue'
  import ChannelColumn from "./components/ChannelColumn";
  import ColumnMedia from "./components/ColumnMedia";
  export default {
    name: "index",
    components: {ChannelColumn, ColumnMedia},
    props: {
      packageid: {
        type: Number,
        required: true
      }
    },
    setup(props) {
      const pkid = toRef(props, 'packageid')
      const channelColumnRef = ref(null)
      const columnMediaRef = ref(null)
      const mediaQueryList = reactive({
        page: 1,
        pagesize: 25,
        packageid: pkid,
        channelid: undefined,
        columnid: undefined,
        keyword: undefined
      })
      const columnMediaConfig = reactive({
        selectedColumn: false,
        channelName: undefined,
        columnName: undefined,
        columnid: undefined
      })

      /** 获取频道栏目媒资列表 **/
      const getChannelMedias = () => {
        columnMediaRef.value.init()
      }
      /** 获取栏目下媒资列表 **/
      const getColumnMedias = () => {
        columnMediaRef.value.getColumnMediaList()
      }

      const init = () => {
        columnMediaConfig.selectedColumn = false
        columnMediaConfig.channelName = undefined
        columnMediaConfig.columnName = undefined
        columnMediaConfig.columnid = undefined
        mediaQueryList.columnid = undefined
        mediaQueryList.channelid = undefined
        mediaQueryList.page = 1
        mediaQueryList.pagesize = 25
        mediaQueryList.packageid = pkid
        mediaQueryList.keyword = undefined
        nextTick(() => {
          channelColumnRef.value.init()
        })
      }

      return {
        channelColumnRef,
        init,
        pkid,
        mediaQueryList,
        columnMediaRef,
        getChannelMedias,
        columnMediaConfig,
        getColumnMedias
      }

    }
  }
</script>

<style scoped>

</style>
